<template>
  <div class="index">
    <div class="title">
      <h2 class="mx-1" type="success">爱尚收数据展示平台</h2>
    </div>
    <el-row :gutter="10" class="el-row-echarts">
      <el-col :span="7">
        <Hycard title="销售分类商品数量">
          <!-- <PieEcharts :pieData="categoryGoodsCount"></PieEcharts> -->
          <PieEcharts></PieEcharts>
        </Hycard>
      </el-col>
      <el-col :span="10">
        <Hycard title="各地回收品数量">
          <MapEcharts></MapEcharts>
        </Hycard>
      </el-col>
      <el-col :span="7">
        <Hycard title="回收商品数量(玫瑰图)">
          <RoseEcharts></RoseEcharts>
        </Hycard>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <Hycard title="回收废物品数量(line)">
          <LineEcharts></LineEcharts>
        </Hycard>
      </el-col>
      <el-col :span="12">
        <Hycard title="分类商品数量(bar)">
          <BarEcharts></BarEcharts>
        </Hycard>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import { useStore } from "vuex";
// 引入echaers5
import * as echarts from "echarts";
import Hycard from "@/base-ui/card";
import BaseEchart from "@/base-ui/echarts";
import {
  PieEcharts,
  RoseEcharts,
  LineEcharts,
  BarEcharts,
  MapEcharts
} from "@/components/page-echarts";
export default defineComponent({
  name: "index",
  components: {
    Hycard,
    RoseEcharts,
    PieEcharts,
    LineEcharts,
    BarEcharts,
    MapEcharts
  },
  setup() {
    const store = useStore();
    const divRef = ref<HTMLElement>();
    // store.dispatch("echartData/getechartsDataAction");
    // 获取请求拿到的数据
    // const categoryGoodsCount = computed(() => {
    //   // return store.state.index.categoryGoodsCount;
    //   return store.state.index.categoryGoodsCount.map((item: any) => {
    //     return { name: item.name, value: item.goodsCount };
    //   });
    // });
    return {
      divRef
    };
  }
});
</script>

<style scoped lang="less">
.index {
  .title {
    text-align: center;
    .mx-1 {
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-size: 30px;
      color: rgb(114, 142, 102);
    }
  }
  .el-row-echarts {
    margin-bottom: 40px;
  }
}
</style>
